<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-for:遍历数据（数组、对象） -->
    <div id="app">
        <!-- 1.v-for：遍历数组 -->
        <!-- item:形参，表示数组中的每一项数据 -->
        <li v-for="item in arr">{{item}}</li>
        <!-- index:形参，表示数组的下标 -->
        <li v-for="(item,index) in arr">{{index}}----{{item}}</li>

        <!-- 2.v-for:遍历对象 -->
        <!-- value:形参，表示对象的值 -->
        <li v-for="value in person">{{value}}</li>
        <!-- key:形参，表示对象的键 -->
        <li v-for="(value,key) in person">{{key}}----{{value}}</li>
        <!-- index:形参，表示对象的下标 -->
        <li v-for="(value,key,index) in person">{{index}}----{{key}}----{{value}}</li>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                arr:["111","222","333","444"],
                person:{
                    name:"小米",
                    age:18,
                    height:190,
                    weight:130
                }
            }
        })
    </script>

    
</body>
</html>